<template>
    <div id="help">
        <van-nav-bar title="帮助中心" left-arrow @click-left="onClickLeft" />
        <div id="search">
            <van-search v-model="value" placeholder="请输入搜索内容" style="width: 100%;" />
        </div>
        <div id="classification">
            <div id="classification_con">
                <p class="title_p">专区分类</p>
                <van-grid :column-num="5" :border="false">
                    <van-grid-item>
                        <img src="@/assets/images/挂号.png" alt="">
                        <span>挂号专区</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="@/assets/images/绑卡.png" alt="">
                        <span>绑卡专区</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="@/assets/images/订单.png" alt="">
                        <span>订单专区</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="@/assets/images/医保.png" alt="">
                        <span>医保专区</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="@/assets/images/综合.png" alt="">
                        <span>综合专区</span>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
        <div id="HotQuestion">
            <div id="HotQuestion_con">
                <p class="title_p">热门问题</p>
                <ul>
                    <li>
                        <span>如何取消预约挂号?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <span>门诊挂号能否使用医保支付?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <span>门诊缴费怎么查看明细?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <span>如何绑定就诊卡,又如何解绑?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <span>住院预交金如何给亲友充值?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <span>医保支付的挂号订单能否线上退款?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <span>如何注销账号?</span>
                        <span><van-icon name="arrow" /></span>
                    </li>
                </ul>
            </div>
        </div>
        <div id="footer">
            <div id="footer_con">
                <button class="btn1">人工服务</button>
                <button class="btn2">我要反馈</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('');
</script>

<style scoped>
#help {
    width: 100vw;
    height: 100vh;
    background: #f2f2f2;

    #search {
        width: 100%;
        height: 55px;
        margin-top: 10px;
        background: pink;
        background-color: white;
    }

    #classification {
        width: 100%;
        height: 120px;
        background: white;
        margin-top: 10px;

        #classification_con {
            width: 95%;
            height: 100%;
            margin: 0 auto;
            padding-top: 10px;

            .title_p {
                border-left: 3px solid #4678ff;
                font-size: 14px;
                padding-left: 5px;
                font-weight: bold;
            }

            img {
                width: 35px;
                height: 32px;
                margin-bottom: 5px
            }

            span {
                font-size: 13px;
            }
        }
    }

    #HotQuestion {
        width: 100%;
        height: 400px;
        background: white;
        margin-top: 10px;

        #HotQuestion_con {
            width: 95%;
            height: 100%;
            margin: 0 auto;
            padding-top: 10px;
            .title_p {
                border-left: 3px solid #4678ff;
                font-size: 14px;
                padding-left: 5px;      
                font-weight: bold;
            }
            li{
                width: 95%;
                height:100%;
                margin:0 auto;
                padding-top:15px;
                padding-bottom: 15px;
                border-bottom: 1px solid #cecece;
                font-size: 15px;
                font-weight: 500;
                display:flex;
                justify-content: space-between;
            }
        }
    }

    #footer {
        width: 100%;
        height: 80px;
        background: white;
        margin-top: 10px;

        #footer_con {
            width: 95%;
            height: 100%;
            margin: 0 auto;
            display:flex;
            justify-content: space-around;
            .btn1{
                width:170px;
                height:40px;
                background: #eb4d52;
                border:none;
                border-radius: 10px;
                margin-top:20px;
                color:white;
                font-size: 13px;;
            }
            .btn2{
                width:170px;
                height:40px;
                background: #4678ff;
                border:none;
                border-radius: 10px;
                margin-top:20px;
                color:white;
                font-size: 13px;;
            }
        }   
    }
}
</style>